<template>
  <div id="app">
    <el-container>
      <el-header style="padding:0px;">
        <Menu style="position:fixed;z-index:10;"></Menu>
      </el-header>
      <el-main style="padding:0px;height:auto">
        <vue-particles
          id="particles-js"
          color="#ffffff"
          :particleOpacity="0.7"
          :particlesNumber="80"
          shapeType="star"
          :particleSize="4"
          linesColor="#eeeeff"
          :linesWidth="2"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="3"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="push"
        >
        </vue-particles>
        <transition
          mode="out-in"
          name="fade"
        >
          <router-view
            class="animated"
            style="padding:20px;width:auto;height:auto;margin-bottom:80px;margin-top:25px;border-radius: 10px;"
          ></router-view>
        </transition>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Menu from 'components/content/menu/Menu'

export default {
  name: 'app',
  components: {
    Menu
  },
  watch: {
    '$route' (to, from) {
      this.$router.go(0)
    }
  }
}
</script>

<style>
@import "assets/css/base.css";
#particles-js {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -5;
  /* background-color: silver; */
  background-image: url(assets/img/sky.jpg);
}
</style>
